<div class="panel panel-default" id="sessions_list">
	<div class="panel-heading">
		<h3 class="panel-title">
			All Sessions
		</h3>

		<!-- <div class="panel-options">
			<a href="#" data-toggle="panel">
			    <span class="collapse-icon">–</span>
				<span class="expand-icon">+</span>
			</a>
		</div> -->
	</div>
	<div class="panel-body">
	
	    <div class="row" style="margin-bottom: 5px;">
            <div class="col-sm-12">
                <form role="form" class="form-inline pull-right" onsubmit="return false;">

                    <div class="form-group">
                        <input type="text" class="form-control" size="25" v-model="clientKey"
                            placeholder="ClientId" id="user_key" @change="search"/>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-success btn-single" @click="search">Search</button>
                    </div>

                </form>
            </div>
        </div>

		<div class="table-responsive" data-pattern="priority-columns"
			data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
			data-add-display-all-btn="true" data-add-focus-btn="true">
			<table class="table table-hover">
				<thead>
					<tr>
						<th>ClientId</th>
						<th>CleanSess</th>
						<th>MaxInflight</th>
						<th>Inflight</th>
						<th>MQueueLen</th>
						<th>MQueueDropped</th>
						<th>AwaitingRel</th>
						<th>DeliverMsg</th>
						<th>EnqueueMsg</th>
						<th>CreatedAt</th>
					</tr>
				</thead>

				<tbody>
                    <tr v-for="session in sessions">
                    <td>{{ session.clientId }}</td>
                    <td>{{ session.clean_sess }}</td>
                    <td>{{ session.max_inflight }}</td>
                    <td>{{ session.inflight_len }}</td>
                    <td>{{ session.mqueue_len }}</td>
                    <td>{{ session.mqueue_dropped }}</td>
                    <td>{{ session.awaiting_rel_len }}</td>
                    <td>{{ session.deliver_msg }}</td>
                    <td>{{ session.enqueue_msg }}</td>
                    <td>{{ session.created_at }}</td>
                    </tr>
				</tbody>
			</table>
		</div>
		
		<div class="row">
            <div class="col-sm-6">showing 
                <span id="sessions_count_start">{{ pageInfo.offsetting() }}</span> - 
                <span id="sessions_count_end">{{ pageInfo.endNum() }}</span> of 
                <span id="sessions_count_all">{{ pageInfo.totalNum }}</span> records
            </div>
            <div class="col-sm-6">
                <div class="pull-right" id="pagination">
                <template v-if="pageInfo.currPage <= 1">
                <button type="button" class="btn btn-white disabled previous">Previous</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white previous" @click="go(pageInfo.currPage-1)">Previous</button>
                </template>
                <div class="btn-group">
                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                        records per page <strong id="page_size">{{ pageInfo.pageSize }}</strong> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-white" role="menu">
                        <li>
                            <a href="javascript:;" @click="changeSize(100);">100</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(200);">200</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(500);">500</a>
                        </li>
                        <li>
                            <a href="javascript:;" @click="changeSize(1000);">1000</a>
                        </li>
                    </ul>
                </div>
                <template v-if="pageInfo.currPage >= pageInfo.totalPage">
                <button type="button" class="btn btn-white disabled next">Next</button>
                </template>
                <template v-else>
                <button type="button" class="btn btn-white next" @click="go(pageInfo.currPage+1)">Next</button>
                </template>
                </div>
            </div>
        </div>

	</div>
</div>
